<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../../../总结笔记/jQuery/jQuery库/jquery-1.10.1.js"></script>
    <link rel="stylesheet" href="../../../../总结笔记/plug-in/bootstrap@3.3.4/css/bootstrap.min.css">
</head>
<style>
    *{
        padding: 0;
        margin: 0;
    }
    .wrap{
        width: 1200px;
        margin: auto;
    }
    header{
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        flex-shrink: 0;
    }
    .nav1{
        width: 220px;
        height: 300px;
        border: 2px solid red;
        margin-bottom: 10px;
        
    }

    li{
        list-style-type: none;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    img{
        width: 200px;
        height: 200px;
    }
    table{
        margin-top: 30px;
        text-align: center;
    }
    
</style>
<body>
    <div class="wrap">
        <header>
        
        </header>
       <!--  <input type="text" class="inp">
        <button class="but">输入学号查找</button> -->
        <div class="table-responsive">
            <table class="table" border="1">
                <thead>
                    <tr>
                        <td>id</td>
                        <td>姓名</td>
                        <td>语文</td>
                        <td>数学</td>
                        <td>英语</td>
                        <td>理综</td>
                        <td>文综</td>
                        <td>平均分</td>
                        <td>总分</td>
                    </tr>
                </thead>
                <tbody class="tbo">

                </tbody>
            </table>
        </div>
        <button class="but">点击渲染</button>
    </div>
    <script>
        let header=document.querySelector('header');
        let tbo=document.querySelector('.tbo');
        var inp_value=$('.inp').val()
        console.log(tbo,inp_value,$('.but'))
        $.ajax({
            method:'get',
            url:'http://192.168.110.219:3000/search_info',
            success(data){
                console.log(data)
                let dataArr=data.slice(0,10);
                console.log(dataArr)
                dataArr.forEach((el)=>{
                    header.innerHTML+=`
                    <ul class="nav1">
                        <li><img src="${el.stu_head_img}" alt=""></li>
                        <li>${el.stu_name}</li>
                        <li>${el.stu_id}</li>
                        <li>${el.stu_sex}</li>
                        <li>${el.stu_jg}</li>
                    </ul>
                    `
                });
                
                $('.but').click(function(e){
                    tbo.innerHTML=''
                    e.preventDefault();
                    $.ajax({
                        method:'get',
                        url:'http://192.168.110.219:3000/search_entry/00',
                        success(data){
                            console.log(data);
                                data.forEach(el=>{
                                    tbo.innerHTML+=`
                                    <tr>
                                        <td>${el.stu_id}</td>
                                        <td>${el.stu_name}</td>
                                        <td>${el.chinese}</td>
                                        <td>${el.math}</td>
                                        <td>${el.english}</td>
                                        <td>${el.lizong}</td>
                                        <td>${el.wenzong}</td>
                                        <td>${(el.chinese+el.math+el.english+el.lizong+el.wenzong)*1/5}</td>
                                        <td>${(el.chinese+el.math+el.english+el.lizong+el.wenzong)*1}</td>
                                    </tr>
                                    `
                                })  
                        },
                        error(err){
                            console.log(err)
                        }
                    })
                })
            },
            error(err){
                console.log(err)
            }
        })
    </script>
</body>
</html>